<template>
    <div class="mod-home">
        <el-row :gutter="20" class="top">
            <el-col :span="8">
                <div class="title">
                    <div>待关怀客户信息</div>
                </div>
                <div style="height: calc(100% - 50px)">
                    <table-grid
                        ref="sxTableRef"
                        :showTableToolbar="false"
                        :tableColumn="ghTableColumn"
                        :tableData="ghTableData"
                        @cellClick="openCustDetailDialog"
                        style="height: 100%;"
                    ></table-grid>
                </div>
            </el-col>
            <el-col :span="8">
                <div id="ldTable" style="height: 100%;width: 100%"></div>
            </el-col>
            <el-col :span="8">
                <div class="title">
                    <div>业绩</div>
                    <div>
                        <el-button-group>
                            <el-button size="small" :type="tabYJCurrent === 0 ? 'primary' : ''"
                                       @click="getCustDataList(0)">本月
                            </el-button>
                            <el-button :type="tabYJCurrent === 1 ? 'primary' : ''" size="small"
                                       @click="getCustDataList(1)">本季
                            </el-button>
                            <el-button size="small" :type="tabYJCurrent === 2 ? 'primary' : ''" @click="getCustDataList(2)">
                                本年
                            </el-button>
                        </el-button-group>
                    </div>
                </div>
                <div style="height: calc(100% - 50px)">
                    <table-grid
                        ref="sxTableRef"
                        :showTableToolbar="false"
                        :tableColumn="khyjTableColumn"
                        :tableData="khyjTableData"
                        style="height: 100%;"
                    ></table-grid>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="bottom">
            <el-col :span="12">
                <div class="title">
                    <div>私海商机</div>
                </div>
                <div style="height: calc(100% - 50px)">
                    <table-grid
                        ref="sxTableRef"
                        :showTableToolbar="false"
                        :tableColumn="shTableColumn"
                        :tableData="shTableData"
                        @cellClick="openCustDetailDialog"
                        style="height: 100%;"
                    ></table-grid>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="title">
                    <div>近期跟踪信息</div>
                    <div>
                        <el-button-group>
                            <el-button size="small" :type="tabCurrent === 0 ? 'primary' : ''"
                                       @click="getPersonDataList(0)">本月
                            </el-button>
                            <el-button :type="tabCurrent === 1 ? 'primary' : ''" size="small"
                                       @click="getPersonDataList(1)">本季
                            </el-button>
                            <el-button size="small" :type="tabCurrent === 2 ? 'primary' : ''" @click="getPersonDataList(2)">
                                本年
                            </el-button>
                        </el-button-group>
                    </div>
                </div>
                <div style="height: calc(100% - 50px)">
                    <table-grid
                        v-if="ryyjModel === 'table'"
                        ref="sxTableRef"
                        :showTableToolbar="false"
                        :tableColumn="traceTableColumn"
                        :tableData="traceTableData"
                        @cellClick="openCustDetailDialog"
                        style="height: 100%;"
                    ></table-grid>
                </div>
            </el-col>
        </el-row>
        <person ref="personRef" @confirm="personConfirm"></person>
        <oppo-next-list ref="oppoNextListRef"></oppo-next-list>
        <oppo-next-add ref="oppoNextAddRef"></oppo-next-add>

        <cust-detail ref="custDetailRef"></cust-detail>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import person from './components/person.vue'
import OppoNextList from '@/views/modules/relationship/oppo-next-list'
import OppoNextAdd from '@/views/modules/relationship/next-add-or-update'
import CustDetail from "@/views/templates/custDetail.vue";

export default {
    components: {
        CustDetail,
        person,
        OppoNextList,
        OppoNextAdd,
    },
    data () {
        return {
            khyjModel: 'table',
            ryyjModel: 'table',
            tabCurrent: 0,
            tabYJCurrent: 0,
            ghTableColumn: [
                {type: 'seq', width: 60},
                {
                    title: '关怀类型',
                    field: 'careType',
                    width: 140,
                    search: false
                }, {
                    title: '客户名称',
                    field: 'cusName',
                }, {
                    title: '关怀描述',
                    field: 'traceDesc',
                }
            ],
            ghTableData: [],
            shTableColumn: [
                {type: 'seq', width: 60},
                {field: 'cusName', title: '客户名称'},
                {field: 'biz6', title: '客户行业'},
                {field: 'cusMobile', title: '联系方式'},
                {field: 'buyIntention', title: '产品意向'},
                {field: 'cusStatusName', title: '跟进状态'}
            ],
            shTableData: [],
            khyjTableColumn: [
                {type: 'seq', width: 60},
                {field: 'empName', title: '人员姓名'},
                {field: 'cusNums', title: '客户数'},
                {field: 'orderNum', title: '订单数'},
                {field: 'sumSaleAmt', title: '客户发货额'},
            ],
            khyjTableData: [],
            traceTableColumn: [
                {type: 'seq', width: 60},
                {field: 'cusName', title: '客户名称'},
                {field: 'traceTime', title: '最近日期'},
                {field: 'traceCount', title: '跟踪次数'},
                {field: 'traceDesc', title: '跟踪描述'},
            ],
            traceTableData: [],
            taskList: [],
            taskOList: [],
            taskYList: [],
            chooseTask: null,
            chooseType: '1' //1 转办  2 协办
        }
    },
    mounted () {

        this.getTask()
        this.getCustDataList(0)
        this.getPersonDataList(0)
        this.getSJLDList()
        this.getSHDataList()
    },
    methods: {
        openNewWindow (path) {
            const resolvedRoute = this.$router.resolve({path})
            window.open(resolvedRoute.href, '_blank')
        },
        openPerson (task, type) {
            this.chooseTask = task
            this.chooseType = type
            this.$refs.personRef.init()
        },
        openGzDialog (id) {
            this.$refs.oppoNextListRef.init(id)
        },
        openNextAddDialog (id) {
            this.$refs.oppoNextAddRef.init(id)
        },
        openCustDetailDialog(row){
            this.$refs.custDetailRef.show(row.cusCode)
        },
        personConfirm (person) {
            if (this.chooseType === '1') {
                this.$http({
                    url: this.$http.adornUrl('/crm/transferOffice'),
                    method: 'post',
                    data: this.$http.adornData({
                        crmPlanDayWorkId: this.chooseTask.id,
                        userIdDest: person.id
                    })
                }).then(({data}) => {
                    console.log('🚀 ~ data', data)
                    this.$message.success('转办成功')
                    this.getTask()
                })
            }
            if (this.chooseType === '2') {
                this.$http({
                    url: this.$http.adornUrl('/crm/copyOffice'),
                    method: 'post',
                    data: this.$http.adornData({
                        crmPlanDayWorkId: this.chooseTask.id,
                        userIdDest: person.id
                    })
                }).then(({data}) => {
                    console.log('🚀 ~ data', data)
                    this.$message.success('协办成功')
                    this.getTask()
                })
            }
        },
        getSHDataList () {
            this.$http({
                url: this.$http.adornUrl('/crm/oppo/page'),
                method: 'get',
                params: this.$http.adornParams(
                    Object.assign(
                        {
                            current: 1,
                            size: 100,
                            busiOppoType: "私海"
                        }
                    )
                )
            }).then(({data}) => {
                this.shTableData = data.obj.records
                this.shTableData.forEach((row) => {
                    row.cusStatusName = "";
                    if(row.cusStatus === '1'){
                        row.cusStatusName = "未分配";
                    }else if(row.cusStatus === '2'){
                        row.cusStatusName = "跟踪中";
                    }else if(row.cusStatus === '3'){
                        row.cusStatusName = "已转化";
                    }else{
                        row.cusStatusName = "已签单";
                    }
                })
            })
        },
        getTask () {
            this.$http({
                url: this.$http.adornUrl('/crm/base/cusRule/getCareTaskList'),
                method: 'get',
                params: this.$http.adornParams(
                    Object.assign(
                        {
                            current: 1,
                            size: 100
                        },
                        {
                            careStatus: '0',
                            custManId: this.$store.state.user.name
                        }
                    )
                )
            }).then(({data}) => {
                this.ghTableData = data.obj.records
            })
        },
        getSJLDList () {
            this.$http({
                url: this.$http.adornUrl('/crm/query/cusOppoQuery'),
                method: 'post',
                data: this.$http.adornData({})
            }).then(({data}) => {
                console.log('🚀 ~ data', data)
                this.initLd(data)
            })
        },
        getCustDataList (current) {
            this.tabYJCurrent = current;
            let begDate = ''
            if (current === 0) {
                begDate = wfy.getMonthStartDate()
            }
            if (current === 1) {
                begDate = wfy.getQuarterStartDate()
            }
            if (current === 2) {
                begDate = wfy.getYearStartDate()
            }
            this.$http({
                url: this.$http.adornUrl('/crm/query/getEmpPerf'),
                method: 'post',
                data: this.$http.adornData({
                    empName: this.$store.state.user.name,
                    begDate: begDate
                })
            }).then(({data}) => {
                console.log('🚀 ~ data', data)
                this.khyjTableData = data.obj

            })
        },
        getPersonDataList (current) {
            this.tabCurrent = current;
            let begDate = ''
            if (current === 0) {
                begDate = wfy.getMonthStartDate()
            }
            if (current === 1) {
                begDate = wfy.getQuarterStartDate()
            }
            if (current === 2) {
                begDate = wfy.getYearStartDate()
            }
            this.$http({
                url: this.$http.adornUrl('/crm/query/getCustTraceInfo'),
                method: 'post',
                data: this.$http.adornData({
                    traceTime: begDate,
                })
            }).then(({data}) => {
                console.log('🚀 ~ data', data)
                this.traceTableData = []
                this.traceTableData = data.obj

            })
        },
        initRyyj () {
            this.ryyjModel = 'charts'
            this.$nextTick(() => {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('ryyjTable'))

                // 指定图表的配置项和数据
                var option = {
                    title: {},
                    tooltip: {},
                    legend: {},
                    xAxis: {
                        data: ['人员1', '人员2', '人员3', '人员4']
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '业绩',
                            type: 'bar',
                            data: [2000, 3000, 4000, 5000]
                        }
                    ]
                }

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option)
            })
        },
        initKhyj () {
            this.khyjModel = 'charts'
            this.$nextTick(() => {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('khyjTable'))

                // 指定图表的配置项和数据
                var option = {
                    title: {},
                    tooltip: {},
                    legend: {},
                    xAxis: {
                        data: ['客户1', '客户2', '客户3', '客户4']
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '业绩',
                            type: 'bar',
                            data: [2000, 3000, 4000, 5000]
                        }
                    ]
                }

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option)
            })
        },
        initLd (data) {
            let legend = []
            let chartData = []
            let max = 0
            let maxData = []
            data.obj.forEach((item) => {
                legend.push(item.status)
                maxData.push(item.cusNums)
                chartData.push({
                    value: item.cusNums,
                    name: item.status
                })
            })
            max = Math.max(...maxData)
            this.$nextTick(() => {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('ldTable'))

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '客户转换'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    toolbox: {
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        data: legend
                    },
                    series: [
                        {
                            name: '客户转换',
                            type: 'funnel',
                            left: '10%',
                            top: 60,
                            bottom: 60,
                            width: '80%',
                            min: 0,
                            max: max,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            data: chartData
                        }
                    ]
                }

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option)
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.mod-home {
    display: flex;
    flex-direction: column;

    .top, .bottom {
        height: 50%;
    }

    .bottom {
        margin-top: 20px;
    }
}

.renwu-box {
    height: calc(100% - 40px);
    overflow-y: scroll;

    .renwu-item {
        height: 80px;
        width: 100%;
        border-bottom: 1px solid #f1f1f1;
        font-weight: bold;

        .renwu-title {
            display: flex;
            height: 40px;
            justify-content: space-between;
            align-items: center;

            .title {
                padding-left: 0;
            }
        }

        .renwu-title-btn {
            display: flex;
            width: 200px;
            justify-content: flex-end;
            align-items: center;
        }

        .renwu-bottom {
            display: flex;
            height: 40px;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;

            .status {
                color: #409EFF;
            }
        }
    }
}

.title {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    font-weight: bold;
    padding-left: 4px;
}

::v-deep .avue-crud__menu {
    display: none !important;
}

::v-deep .el-col {
    height: 100%;
}
</style>

